<!DOCTYPE html>
<html class="no-js" lang style="font-size: 64px">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>&#x5D4C;&#x5165;web-view</title>
    <meta name="description" content="web-view page">
    <style type="text/css">
        body,
        button,
        input {
            font-size: 32px;
        }

        .page {
            font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
            font-size: 0.24rem;
            padding: 0.32rem;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        .page-description {
            margin-bottom: 0.32rem;
        }

        .a-button {
            margin-top: 0.2rem;
            margin-bottom: 0.2rem;
            display: block;
            outline: 0 none;
            -webkit-appearance: none;
            box-sizing: border-box;
            padding: 0;
            text-align: center;
            font-size: 18px;
            height: 47px;
            line-height: 47px;
            border-radius: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            white-space: nowrap;
            color: #000;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .a-button-primary {
            color: #fff;
            background-color: #108ee9;
            border-color: #108ee9;
            cursor: pointer;
        }

    </style>
</head>
<body>
<script>
  var audioFilePath;

  function postMessage() {
    console.log("调用了postMessage");
    my.postMessage({
      name: "测试web-view",
    });
  }

  function getEnv() {
    my.getEnv(function(result) {
      console.log("调用了getEnv" + JSON.stringify(result));
      window.alert(JSON.stringify(result));
    });
  }

  function getNetworkType() {
    my.getNetworkType({
      success: function(result) {
        console.log("调用了getNetworkType" + JSON.stringify(result));
        window.alert(JSON.stringify(result));
      },
    });
  }

  function showLoadingAndHide() {
    my.showLoading({
      text: "加载中, 五秒后自动关闭",
    });
    window.setTimeout(function() {
      my.hideLoading();
    }, 5 * 1000);
  }

  function getLocation() {
    my.getLocation({
      type: 1,
      success: function(result) {
        console.log("调用了getLocation" + JSON.stringify(result));
        window.alert(JSON.stringify(result));
      },
    });
  }

  function openLocation() {
    my.openLocation({
      longitude: "120.126293",
      latitude: "30.274653",
      name: "黄龙万科中心",
      address: "学院路77号",
      scale: 5,
      success: function(result) {
        console.log("调用了openLocation" + JSON.stringify(result));
        window.alert(JSON.stringify(result));
      },
    });
  }

  function alert(content) {
    my.alert({
      title: "亲",
      content: content || "您本月的账单已出",
      buttonText: "我知道了",
    });
  }

  function showActionSheet() {
    my.showActionSheet({
      title: "支付宝-ActionSheet",
      items: ["菜单一", "菜单二", "菜单三"],
      cancelButtonText: "取消",
      success: function(result) {
        console.log("调用了openLocation" + JSON.stringify(result));
        window.alert(JSON.stringify(result));
      },
    });
  }

  function chooseImage() {
    my.chooseImage({
      count: 3,
      sourceType: ["camera", "album"],
      success: function(result) {
        console.log("调用了chooseImage" + JSON.stringify(result));
        window.alert(result);
      },
    });
  }

  function previewImage() {
    my.previewImage({
      current: 2,
      urls: [
        "https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg",
        "https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg",
        "https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg",
      ],
    });
  }

  function saveImage() {
    my.saveImage({
      url: "https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg",
      success: function(res) {
        console.log("调用了saveImage" + JSON.stringify(res));
        window.alert("操作结果" + JSON.stringify(res));
      },
    });
  }

  function uploadFile() {
    my.chooseImage(3, function(res) {
      if (res.apFilePath) {
        my.uploadFile({
          url: "http://httpbin.org/post",
          fileType: "image",
          fileName: "file",
          filePath: res.apFilePath,
          success: function(res) {
            if (!res.hasOwnProperty("error")) {
              console.log("调用了uploadFile" + JSON.stringify(res));
              window.alert("上传成功" + JSON.stringify(res));
            }
          },
        });
      }
    });
  }

  function downloadFile() {
    my.downloadFile({
      url:
        "https://zos.alipayobjects.com/rmsportal/MMpnSrfxpnMhBKlECDDv.jpg",
      success: function(result) {
        console.log("调用了downloadFile" + JSON.stringify(result));
        window.alert("上传成功" + JSON.stringify(result));
      },
    });
  }

  //开始录音
  function startRecord() {
    my.startRecord(function(res) {
      audioFilePath = res.apFilePath;
    });
  }

  //
  function stopRecord() {
    my.stopRecord();
  }

  function playVoice() {
    if (audioFilePath) {
      my.playVoice(audioFilePath);
    } else {
      window.alert("不妨先录一段");
    }
  }

  function pauseVoice() {
    my.pauseVoice();
  }

  function stopVoice() {
    my.stopVoice();
  }

  //---------------Beacon-------------------------
  function startBeaconDiscovery() {
    var beaconID = document.getElementById("beaconId").value;
    if (beaconID.length == 0)
      document.getElementById("statusDesc").innerText =
        "beaconID 为空，请检查输入";
    AlipayJSBridge.call(
      "startBeaconDiscovery",
      {
        uuids: [beaconID],
      },
      function(result) {
        document.getElementById("statusDesc").innerText =
          "开启开始搜索" + JSON.stringify(result);
      }
    );

    document.addEventListener("beaconUpdate", function(data) {
      document.getElementById("statusDesc").innerText =
        "beaconUpdate" + JSON.stringify(data);
    });
  }

  function stopBeaconDiscovery() {
    AlipayJSBridge.call("stopBeaconDiscovery", {}, function(result) {
      document.getElementById("statusDesc").innerText =
        "stopBeaconDiscovery = " + JSON.stringify(result);
    });
  }

  function navigateTo() {
    my.navigateTo({
      url: "../icon/icon",
      success: function(res) {
        if (res) {
          window.alert("操作结果" + JSON.stringify(res));
        }
      },
    });
  }

  function navigateBack() {
    my.navigateBack();
  }

  function switchTab() {
    my.switchTab({
      url: "/page/tabBar/API/index",
      success: function(res) {
        if (res) {
          window.alert("操作结果" + JSON.stringify(res));
        }
      },
    });
  }

  function reLaunch() {
    my.reLaunch({
      url: "/page/tabBar/component/index",
    });
  }

  function redirectTo() {
    my.redirectTo({
      url: "../icon/icon",
      success: function(res) {
        if (res) {
          window.alert("操作结果" + JSON.stringify(res));
        }
      },
    });
  }

  function tradePay() {
    my.tradePay({
      orderStr: "timestamp=....", // 即上述服务端已经加签的orderSr参数
      success: function(result) {
        console.log("调用了tradePay" + JSON.stringify(result));
        window.alert('"调用了tradePay"' + JSON.stringify(result));
      },
    });
  }

  // function getUserInfo() {
  //   my.getAuthCode({
  //     scopes: "auth_user",
  //     fail: function (error) {
  //       console.error("getAuthCode", error);
  //       window.alert("获取授权码失败");
  //     },
  //     success: function () {
  //       my.getAuthUserInfo({
  //         success: function (result) {
  //           window.alert("调用getAuthUserInfo" + JSON.stringify(result));
  //         },
  //       });
  //     },
  //   });
  // }

  function navigateToMiniProgram() {
    my.navigateToMiniProgram({
      appId: "2017070707674703",
      success: function(result) {
        console.log(JSON.stringfy(result));
      },
    });
  }

  function getSystemInfo() {
    my.getSystemInfo({
      success: function(result) {
        window.alert("调用getSystemInfo" + JSON.stringify(result));
      },
    });
  }

  function sendAction(action) {
    my.postMessage(action);
  }

  function getUserInfo() {
    my.call('getUserInfo', {
      debug: false
    }, (ret3) => {
      window.alert("调用getUserInfo" + JSON.stringify(ret3));
    })
  }

  function shareMessage22() {
    my.call('shareMessage', {
      title: '一个合格(优秀)的前端都应该阅读这些文章', //分享标题 -必传
      link: 'https://juejin.cn/post/6844903896637259784?share_token=4b9967cd-35d7-40f6-81b9-8a9843118077', //分享链接,参数中如果有中文，需要对参数进行编码 -必传
      imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fvignette.wikia.nocookie.net%2Fyoutube%2Fimages%2F9%2F93%2FDramaAlert.jpg%2Frevision%2Flatest%3Fcb%3D20160617125011&refer=http%3A%2F%2Fvignette.wikia.nocookie.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659770897&t=9cac2ccb6ae08971038a183547850d50', //分享图标 -必传
      content: '一个合格(优秀)的前端都应该阅读这些文章', //分享内容 -必传
      type: 'link', //分享类型,music、video或link，不填默认为link (ios只支持link)
      dataUrl: '', //如果type是music或video，则要提供数据链接，默认为空
      funCode: '', // 功能编码
      stepId: '', // 步骤ID
      shareChannelArray: [], // 分享渠道列表，默认不传, //-4:保存和彩云；-3: 微信快照, -2:朋友圈快照, -1:保存快照到相册, 0: 微信朋友圈, 1:微信好友, 2:新浪微博, 3:二维码,4：QQ, 5：QQ空间, 6：短信, 7: 更多
      qrCodeUrl: '',//活动URL，客户端负责转成二维码图片（截屏分享才有）
    }, (result) => {
      console.log("失败")
      window.alert("调用shareMessage" + JSON.stringify(result));
    });
  }

  function openLiveRoom() {

    my.call('openLiveRoom', {
      debug: false,
      anchorId: '12333333',
      shareNumber: '',
      channelId: '',
      isClose: '0' //是否关闭当前H5中转页面，1是关闭；0是不关闭, 非必填默认不关闭,
    }, (result) => {
      window.alert("调用openLiveRoom" + JSON.stringify(result));
    });

  }

  function newWebview() {
    my.call('newWebview', {
      markID: '', //字符串类型，活动 ID （活动id，允许不）
      type: '', //字符串类型（分享类型，内部保留字段，允许不传）
      funCode: '', //字符串类型（分享业务编码，内部保留字段，允许不传）
      url: 'http://www.baidu.com',
    }, (result) => {
      window.alert("调用newWebview" + JSON.stringify(result));
    });
  }

  function goNativePage() {
    my.call('goNativePage', {
        bizCode: 'BF00901', //功能编码
        placeholder: '', //只搜索页面使用，用于将默认搜索词传给搜索SDK
      },
      (result) => {
        window.alert("调用goNativePage" + JSON.stringify(result));
      });
  }

  function speechBroadcast() {
    my.call('speechBroadcast', {
        text: "测试文本",//播放的文本内容
        isStop: false,//非必填，是否立即停止播报，true 为停止。
        isCareMode: true, //非必填 是否是长辈版朗读，仅支持普通话。
        numReadType: '0' //0 数值优先,  1 完全数值,2 完全字符串，3 字符串优先，默认值：0
      },
      (result) => {
        window.alert("调用speechBroadcast" + JSON.stringify(result));
      });
  }

  function showLogin() {
    my.call('showLogin', {
        debug: false,
      },
      (result) => {
        window.alert("调用showLogin" + JSON.stringify(result));
      });
  }

  function getYDRZToken() {
    my.call('getYDRZToken', {
        debug: false,
        sourceId: "",     //目标业务平台sourceId
        appId: "",
      },
      (result) => {
        window.alert("调用getYDRZToken" + JSON.stringify(result));
      });
  }

  function backToHostApp() {
    my.call('backToHostApp', {
        debug: false,
      },
      (result) => {
        window.alert("调用backToHostApp" + JSON.stringify(result));
      })
  }

  function checkUID() {
    my.call('checkUID', {
      debug: false,
      domain: "https://wx.10086.cn",     //域名,例如:https://app.10086.cn
      chanelId: "12028",//渠道号
    }, (result) => {
      window.alert("调用checkUID" + JSON.stringify(result));
    })
  }

  function overTime() {
    my.call('overTime', {
        debug: false,
        isNeedRemoveLogin: false,//是否需要移除登录页面和自动登录处理（当只需要注销登录状态，不需要拉起登录框时使用）
      },
      (result) => {
        window.alert("调用overTime" + JSON.stringify(result));
      })
  }

  function newVoiceRecognizer() {
    my.call('newVoiceRecognizer', {
        debug: false,
        isStop: false,//是否立即停止录音
        isNeedAutoStop: false,//是否在用户停止说话后自动停止录音，默认false
      },
      (result) => {
        window.alert("调用newVoiceRecognizer" + JSON.stringify(result));
      })
  }

  function userStatus22() {
    my.call('userStatus', {
        debug: false,
      },
      (result) => {
        window.alert("调用userStatus" + JSON.stringify(result));
      })
  }

  function openOtherAPP() {
    my.call('openOtherAPP', {
        debug: false,
        type: '1', //打开应用的类型。‘0’表示打开其他APP，‘1’打开新浪微博
        //schemeString为拼装好的字符串，注意转码，不能包含中文
        //例如：sinaweibo://sendweibo?luicode=10000360&lfid=OP_APPKEY&content=abcdefg
        //客户端拿到后去替换“APPKEY”变为实际值：sinaweibo://sendweibo?luicode=10000360&lfid=OP_111222&content=abcdefg
        schemeString: 'sinaweibo://sendweibo?luicode=10000360&lfid=OP_APPKEY&content=abcdefg'
      },
      (result) => {
        window.alert("调用openOtherAPP" + JSON.stringify(result));
      })
  }

  function getOpenID() {
    my.call('getOpenID', {
        debug: false,
        appId: "6593913692463692",
      },
      (result) => {
        window.alert("调用getOpenID" + JSON.stringify(result));
      })
  }

  function getAppId() {
    my.call('getAppId', {
        debug: false,
      },
      (result) => {
        window.alert("调用getAppId" + JSON.stringify(result));
      })
  }

</script>
<div class="a-view page">
    <div class="a-view page-description">Webview API</div>
    <div class="a-view page-section">
        <div class="a-view page-section-demo">
            <a role="button" onclick="alert()" class="a-button a-button-primary">
                alert
            </a>
            <a role="button" onclick="navigateTo()" class="a-button a-button-primary">
                navigateTo
            </a>
            <a role="button" onclick="navigateBack()" class="a-button a-button-primary">navigateBack
            </a>
            <a role="button" onclick="switchTab()" class="a-button a-button-primary">switchTab
            </a>
            <a role="button" onclick="reLaunch()" class="a-button a-button-primary">reLaunch
            </a>
            <a role="button" onclick="redirectTo()" class="a-button a-button-primary">redirectTo
            </a>
            <a role="button" onclick="postMessage()" class="a-button a-button-primary">&#x5411;&#x5C0F;&#x7A0B;&#x5E8F;
                postMessage
            </a>
            <a role="button" onclick="sendAction(&apos;action/sendMessage&apos;)"
               class="a-button a-button-primary feature1">
                &#x5728; WebView &#x5185;&#x63A5;&#x6536;&#x6D88;&#x606F;
            </a>
            <a role="button" onclick="sendAction(&apos;action/closeWebview&apos;)"
               class="a-button a-button-primary feature2">
                &#x5173;&#x95ED; WebView
            </a>
            <a role="button" onclick="getEnv()" class="a-button a-button-primary">getEnv</a>
            <a role="button" onclick="getNetworkType()" class="a-button a-button-primary">getNetworkType</a>
            <a role="button" onclick="getLocation()" class="a-button a-button-primary">getLocation</a>
            <a role="button" onclick="openLocation()" class="a-button a-button-primary">openLocation</a>
            <a role="button" onclick="showLoadingAndHide()" class="a-button a-button-primary">showLoading&#x548C;hideLoading</a>
            <a role="button" onclick="chooseImage()" class="a-button a-button-primary">chooseImage</a>
            <a role="button" onclick="previewImage()" class="a-button a-button-primary">previewImage</a>
            <a role="button" onclick="getUserInfo()" class="a-button a-button-primary">getUserInfo</a>
            <a role="button" onclick="shareMessage22()" class="a-button a-button-primary">shareMessage</a>
            <a role="button" onclick="openLiveRoom()" class="a-button a-button-primary">openLiveRoom</a>
            <a role="button" onclick="newWebview()" class="a-button a-button-primary">newWebview</a>
            <a role="button" onclick="goNativePage()" class="a-button a-button-primary">goNativePage</a>
            <a role="button" onclick="speechBroadcast()" class="a-button a-button-primary">speechBroadcast</a>
            <a role="button" onclick="showLogin()" class="a-button a-button-primary">showLogin</a>
            <a role="button" onclick="getYDRZToken()" class="a-button a-button-primary">getYDRZToken</a>
            <a role="button" onclick="checkUID()" class="a-button a-button-primary">checkUID</a>
            <a role="button" onclick="overTime()" class="a-button a-button-primary">overTime</a>
            <a role="button" onclick="newVoiceRecognizer()" class="a-button a-button-primary">newVoiceRecognizer</a>
            <a role="button" onclick="userStatus22()" class="a-button a-button-primary">userStatus</a>
            <a role="button" onclick="openOtherAPP()" class="a-button a-button-primary">openOtherAPP</a>
            <a role="button" onclick="getOpenID()" class="a-button a-button-primary">getOpenID</a>
            <a role="button" onclick="getAppId()" class="a-button a-button-primary">getAppId</a>
        </div>
    </div>
</div>


<script>
  if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('DingTalk') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }
  if (typeof my === "undefined") {
    var node = document.createElement("h1");
    node.innerText = "当前不在小程序环境中，my 对象不存在";
    document.querySelector(".page-description").appendChild(node);
  }
  my.onMessage = (data) => {
    my.alert({
      title: "H5 中收到",
      content: JSON.stringify(data),
    });
  };

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  if (!getParameterByName("feature1")) {
    document.querySelector(".feature1") &&
    document.querySelector(".feature1").remove();
  }
  if (!getParameterByName("feature2")) {
    document.querySelector(".feature2") &&
    document.querySelector(".feature2").remove();
  }
</script>


</body>
</html>